<script type="text/javascript">
 $(function(){ 
	var $panel = $.CurrentNavtab;
	var $t     = $('#depttreeid');
	var op     = $t.data();
	//添加删除按钮INIT
	var add    = op.addHoverDom ? null : 'edit';
	var remove = op.removeHoverDom ? null : 'edit';
	var onremove = op.onRemove ? '' : 'M_NodeRemove';
	$t.data('addHoverDom', add).data('removeHoverDom', remove).data("onRemove",onremove);
	//拖动INIT
	var edit   = op.editEnable ? true : true,
        bDrag  = op.beforeDrag ? '' : 'M_BeforeNodeDrag',
        bDrop  = op.beforeDrop ? '' : 'M_BeforeNodeDrop',
        onDrop = op.onDrop ? '' : 'M_NodeDrop';
            
    $t.data('editEnable', edit).data('beforeDrag', bDrag).data('beforeDrop', bDrop).data('onDrop', onDrop);
}); 
//单击事件
function ZtreeClick(event, treeId, treeNode) {
	if (treeNode.id==-1) {//根节点不能被编辑
		return false;
	}
    var $detail = $('#dtreedetailid');
    var $detaidrole = $('#treedetaildeptid');
    if ($detail.attr('tid') == treeNode.tId){
    	return;
    }
	if (treeNode.text) {
		$('#dtext').val(treeNode.text);
	}else{
		$('#dtext').val('');
	}
	if (treeNode.leader) {
		$('#leader').val(treeNode.leader);
	}else{
		$('#leader').val('');
	}
	if (treeNode.leadername) {
		$('#leadername').val(treeNode.leadername);
	}else{
		$('#leadername').val('');
	}	
	if (treeNode.pid) {
		$('#dpid').val(treeNode.pid);
	}else{
		$('#dpid').val('');
	}
	if (treeNode.id) {
		$('#did').val(treeNode.id);
	} else {
		$('#did').val('');
	}
	if (treeNode.seq) {
		$('#dseq').val(treeNode.seq);
	} else {
		$('#dseq').val('');
	}
	$('#dtId').val(treeNode.tId);
	$detail.attr('tid', treeNode.tId);
    $detail.show();
    
    $detaidrole.attr('tid', treeNode.tId);
    $detaidrole.show();
    if(treeNode.id == null||treeNode.id==""){
    	$('#ztreedetaildeptgrid').html("");
    }else{
    	$('#depttreeid').bjuiajax('doLoad', {url:"${ctx}/user/userFromDept?deptid="+treeNode.id, target:"#ztreedetaildeptgrid"})
    }
}
//保存属性
function M_Ts_Dept() {
	var zTree  = $.fn.zTree.getZTreeObj("depttreeid");
	var tId = $('#dtId').val();
	var text   = $('#dtext').val();
	var id	 = $('#did').val();
	var pid	 = $('#dpid').val();
	var seq = $('#dseq').val();
	var leader = $('#leader').val();
	var leadername = $('#leadername').val();
	if ($.trim(text).length == 0) {
		alertMsg.error('部门名称不能为空！');
		return;
	}
	var upNode = zTree.getSelectedNodes()[0];
	
	if (!upNode) {
		alertMsg.error('未选中任何部门！');
        return;
	}
	upNode.name   = text;
	upNode.leader = leader;
	upNode.leadername=leadername;
	upNode.text   = text;
	upNode.id 	= id;
	upNode.pid 	= pid;
	upNode.seq = seq;
	$.ajax({
		url: "${ctx}/dept/save",
		type: "POST",
		data:$('#dept_form').serialize(),
		success: function(data) {
			if (data.success){
				upNode.id = data.obj.id;
				upNode.pid 	= data.obj.pid;
				upNode.seq = data.obj.seq;
				zTree.updateNode(upNode);		
			}else{
				
			}
		}
	});
	return false;
}
//监听拖拽事件
function M_BeforeNodeDrag(treeId, treeNodes) {
    return true
}
function M_BeforeNodeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
    /*禁止插入层级为2的节点*/
    if (moveType == 'inner' && targetNode.level == 3) {
    	$("#depttreeid").alertmsg('info', '拖拽失败。原因：目录菜单只能有4层！');
        return false
    }
    /*禁止插入剩余层级不足的子节点*/
    if (moveType == 'inner' && treeNodes[0].isParent) {
        var molevel = 3 - targetNode.level //剩余层级
        var maxlevel = 2
        var zTree = $.fn.zTree.getZTreeObj("ztree1")
        var nodes = zTree.transformToArray(treeNodes)
        var level = nodes[0].level
        
        for (var i = 1; i < nodes.length; i++) {
            if (nodes[i].level == (level + 1)) {
                maxlevel++
                level++
            }
        }
        if (maxlevel > molevel) {
        	$("#depttreeid").alertmsg('info', '拖拽失败。原因：目录菜单只能有3层！');
            return false
        }
    }
    return true
}
//拖拽结束事件
function M_NodeDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
    
}
//删除结束事件
var menudeleteids = [];
function M_NodeRemove(event, treeId, treeNode) {
	if(treeNode.id!=null&&treeNode.id!=""){
		$.ajax({
			url: "${ctx}/dept/remove",
			type: "POST",
			data:{
				id:treeNode.id
			},
			success: function(data) {
				if (data.success){
					menudeleteids.push(treeNode.id);
				}else{
					
				}
			}
		});		
	}
}

//保存菜单
function savemenu(){
	var zTree = $.fn.zTree.getZTreeObj("depttreeid")
    var depts = zTree.getNodes();
	//alert(JSON.stringify(menus[0]));
	
	$("#depttreeid").bjuiajax('doAjax', {url:"${ctx}/dept/saveTree", reload:true,confirmMsg:"是否确定需要保存？",data:{'depts':JSON.stringify(depts[0])}});
}
</script>
<div class="bjui-pageContent">
    <!-- <div class="pageFormContent" data-layout-h="0"> -->
        <div style="float:left; margin:5px 5px 0; width:300px;">
            <fieldset  style="top:15px;bottom:0px;overflow:auto;position: absolute;">
                <legend>树型菜单</legend>
                <button class="btn btn-green" onclick="savemenu();">保存更新</button>
                <div class="alert alert-info form-inline"><i class="fa fa-info-circle"></i> 可拖拽菜单节点</div>
                <div class="clearfix">
                    <div style="float:left; width:300px; height:457px; overflow:auto;">
                        <ul id="depttreeid" class="ztree" data-toggle="ztree" data-max-add-level="3" data-expand-all="true" data-expand-level="3" data-on-click="ZtreeClick">
                            <!-- <li data-id="1" data-pid="0">表单元素</li>
                            <li data-id="10" data-pid="1" data-url="form-button.html" data-tabid="form-button">按钮</li> -->
                            <li data-id="-1" data-faicon="university">组织架构</li>
                            <%
                               for (sdept in sdepts){
                            %>
                            	<li data-id="${sdept.id!}" data-leader="${sdept.leader!}" data-leadername="${sdept.leadername!}" data-pid="${sdept.pid!}" data-text="${sdept.text!}" data-seq="${sdept.seq!}">${sdept.text!}</li>
                            <%
                               if (sdept.sdepts != null && sdept.sdepts.~size > 0){
                                for (dept in sdept.sdepts){
                            %>
                                <li data-id="${dept.id!}" data-leader="${dept.leader!}" data-leadername="${dept.leadername!}" data-pid="${dept.pid!}" data-text="${dept.text!}" data-seq="${dept.seq!}">${dept.text!}</li>
                            <%
                                 if (dept.sdepts != null && dept.sdepts.~size > 0){
                                  for (cdept in dept.sdepts){
                            %>
                                <li data-id="${cdept.id!}" data-leader="${cdept.leader!}" data-leadername="${cdept.leadername!}" data-pid="${cdept.pid!}" data-text="${cdept.text!}" data-seq="${cdept.seq!}">${cdept.text!}</li>
                            <%
                                 }
                                }
                               }
                              }
                            %>
                            <%
                               }
                            %>
                        </ul>
                    </div>
                </div>
            </fieldset>
        </div>
        <!-- 明细编辑START -->
        <div id="dtreedetailid" style="display:none; margin-left:330px; margin-top:5px; margin-right:5px;height:90px;">
        	<fieldset>
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>部门详细信息</legend>
            <form action="${ctx}/dept/save" id="dept_form" method="post">
            	<div class="form-group">
                    <label for="seq" class="control-label x85">排序：</label>
                    <input type="hidden" id="did" name="sdept.id" value=""/>
                    <input type="hidden" id="leader" name="leader" value=""/>
                    <input type="hidden" id="dtId"/>
                    <input type="hidden" id="dpid" name="sdept.pid" value=""/>
                    <input type="text" class="form-control" name="sdept.seq" value="" id="dseq" size="15" placeholder=""/>
                    <label for="icon" class="control-label x85">部门经理：</label>
                    <input type="text" name="leadername" id="leadername" value="" size="15" data-toggle="lookup" data-url="${ctx}/user/selectuser?type=one&ids=leader&names=leadername"  data-width="600" data-height="300">
                </div>
                <div class="form-group">
                	<label for="text" class="control-label x85">部门名称：</label>
                    <input type="text" class="form-control validate[required] required" value="" name="sdept.text" id="dtext" size="30" placeholder="" />
                    <button type="button" class="btn btn-green" onclick="M_Ts_Dept();">确认保存</button>
                </div>
                </form>
                <!-- <div class="form-group" style="padding-top:8px; border-top:1px #DDD solid;">
                    <label class="control-label x85"></label>
                    
                </div> -->
            <!-- </div> -->
            </fieldset>
        </div>
        <!-- 明细编辑END -->
        <!-- 角色权限START -->
        <div id="treedetaildeptid" style="display:none; margin-left:330px;">
        	<fieldset style="top:120px;bottom:0px;left:340px;right:15px;overflow:auto;position: absolute;">
            <!-- <div class="bs-example" data-content="详细信息"> -->
            <legend>部门成员</legend>
            	<div id="ztreedetaildeptgrid" class="bjui-layout" style="width:100%;height:95%;overflow:auto;">
            	
                </div>
            </fieldset>
        </div>
        <!-- 角色权限END -->
    <!-- </div> -->
</div>